import React, { useEffect, useState } from 'react';
import { Link, Outlet, useLocation } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import PublicHeader from '@/components/header';
import './index.less';

const TopicsLayout = observer(() => {
    const [flagBarPos, setflagBarPos] = useState<string>('17%');
    const { pathname } = useLocation();

    useEffect(() => {
        let value: string = '';
        if (pathname === '/record/passed') {
            value = '17%';
        }
        if (pathname === '/record/audited') {
            value = '50%';
        }
        if (pathname === '/record/failed') {
            value = '83%';
        }
        setflagBarPos(value);
    }, [pathname]);

    return (
        <main className='container common-con-top'>
            <PublicHeader title='主题' confirm={false} record={false} />
            <section className='record-nav-con'>
                <nav className='record-nav'>
                    <Link to='/topics' className={`nav-link ${pathname === '/topics' ? 'active' : ''} `}>
                        全部
                    </Link>
                    <Link to='/topics/good' className={`nav-link ${pathname === '/topics/good' ? 'active' : ''} `}>
                        精华
                    </Link>
                    <Link to='/topics/share' className={`nav-link ${pathname === '/topics/share' ? 'active' : ''} `}>
                        分享
                    </Link>
                    <Link to='/topics/ask' className={`nav-link ${pathname === '/topics/ask' ? 'active' : ''} `}>
                        问答
                    </Link>
                    <Link to='/topics/job' className={`nav-link ${pathname === '/topics/job' ? 'active' : ''} `}>
                        招聘
                    </Link>
                    <Link to='/topics/dev' className={`nav-link ${pathname === '/topics/dev' ? 'active' : ''} `}>
                        测试
                    </Link>
                </nav>
            </section>
            <Outlet />
        </main>
    );
});

export default TopicsLayout;
